<template>
    <div style="display: flex;width: 100%;height: 100vh; ">

        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 130px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 绑定值，必须等于 active-value 或 inactive-value，默认为 Boolean 类型 -->
                    <div :style='样式1'>
                        <h4>绑定值，必须等于 active-value 或 inactive-value，默认为 Boolean 类型 : </h4>
                        <spen :style='样式2'>英:v-model,类型:boolean / string / number,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["v-model"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 是否禁用 -->
                    <div :style='样式1'>
                        <h4>是否禁用 : </h4>
                        <spen :style='样式2'>英:disabled,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.disabled' size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示加载中 -->
                    <div :style='样式1'>
                        <h4>是否显示加载中 : </h4>
                        <spen :style='样式2'>英:loading,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.loading' size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- switch 的大小 -->
                    <div :style='样式1'>
                        <h4>switch 的大小 : </h4>
                        <spen :style='样式2'>英:size,类型:enum,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.size' size='small' @change="提交改变">
                            <el-radio label="large">大 </el-radio>
                            <el-radio label="default">中 </el-radio>
                            <el-radio label="small">小</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- switch 的宽度 -->
                    <div :style='样式1'>
                        <h4>switch 的宽度 : </h4>
                        <spen :style='样式2'>英:width,类型:number / string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.width' size='small' @change="提交改变">
                            <el-radio label="50px">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 无论图标或文本是否显示在点内，只会呈现文本的第一个字符 -->
                    <div :style='样式1'>
                        <h4>无论图标或文本是否显示在点内，只会呈现文本的第一个字符 : </h4>
                        <spen :style='样式2'>英:inline-prompt,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["inline-prompt"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- switch 状态为 on 时所显示图标，设置此项会忽略 active-text -->
                    <div :style='样式1'>
                        <h4>switch 状态为 on 时所显示图标，设置此项会忽略 active-text : </h4>
                        <spen :style='样式2'>英:active-icon,类型:string / Component,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;;margin-top: 10px;'>
                        <el-radio-group v-model='属性["active-icon"]' size='small' @change="提交改变">
                            <el-radio :label="Check"><el-button size="small" :icon="Check">钩子</el-button></el-radio>
                            <el-radio :label="Close"><el-button size="small" :icon="Close">叉</el-button></el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group>
                    </div>
                    <!-- switch 状态为 off 时所显示图标，设置此项会忽略 inactive-text -->
                    <div :style='样式1'>
                        <h4>switch 状态为 off 时所显示图标，设置此项会忽略 inactive-text : </h4>
                        <spen :style='样式2'>英:inactive-icon,类型:string / Component,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;margin-top: 10px;'><el-radio-group
                            v-model='属性["inactive-icon"]' size='small' @change="提交改变">
                            <el-radio :label="Check"><el-button size="small" :icon="Check">钩子</el-button></el-radio>
                            <el-radio :label="Close"><el-button size="small" :icon="Close">叉</el-button></el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- on状态下显示的图标组件 -->
                    <div :style='样式1'>
                        <h4>on状态下显示的图标组件 : </h4>
                        <spen :style='样式2'>英:active-action-icon,类型:string / Component,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["active-action-icon"]'
                            size='small' @change="提交改变">
                        </el-radio-group></div>
                    <!-- off状态下显示的图标组件 -->
                    <div :style='样式1'>
                        <h4>off状态下显示的图标组件 : </h4>
                        <spen :style='样式2'>英:inactive-action-icon,类型:string / Component,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["inactive-action-icon"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- switch 打开时的文字描述 -->
                    <div :style='样式1'>
                        <h4>switch 打开时的文字描述 : </h4>
                        <spen :style='样式2'>英:active-text,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["active-text"]'
                            size='small' @change="提交改变">
                            <el-radio label="on">有例子 on </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- switch 的状态为 off 时的文字描述 -->
                    <div :style='样式1'>
                        <h4>switch 的状态为 off 时的文字描述 : </h4>
                        <spen :style='样式2'>英:inactive-text,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["inactive-text"]'
                            size='small' @change="提交改变">
                            <el-radio label="off">有例子 off </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- switch 状态为 on 时的值 -->
                    <div :style='样式1'>
                        <h4>switch 状态为 on 时的值 : </h4>
                        <spen :style='样式2'>英:active-value,类型:boolean / string / number,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["active-value"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- switch的状态为 off 时的值 -->
                    <div :style='样式1'>
                        <h4>switch的状态为 off 时的值 : </h4>
                        <spen :style='样式2'>英:inactive-value,类型:boolean / string / number,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["inactive-value"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 当在 on 状态时的背景颜色(已废弃，请使用 CSS var --el-switch-on-color ) -->
                    <div :style='样式1'>
                        <h4>当在 on 状态时的背景颜色(已废弃，请使用 CSS var --el-switch-on-color ) : </h4>
                        <spen :style='样式2'>英:active-color,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["active-color"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- off 状态时的背景颜色(已废弃，使用 CSS var --el-switch-off-color ) -->
                    <div :style='样式1'>
                        <h4>off 状态时的背景颜色(已废弃，使用 CSS var --el-switch-off-color ) : </h4>
                        <spen :style='样式2'>英:inactive-color,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["inactive-color"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 开关的边框颜色 ( 已废弃，使用 CSS var --el-switch-border-color ) -->
                    <div :style='样式1'>
                        <h4>开关的边框颜色 ( 已废弃，使用 CSS var --el-switch-border-color ) : </h4>
                        <spen :style='样式2'>英:border-color,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["border-color"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- switch 对应的 name 属性 -->
                    <div :style='样式1'>
                        <h4>switch 对应的 name 属性 : </h4>
                        <spen :style='样式2'>英:name,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.name'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 是否触发表单验证 -->
                    <div :style='样式1'>
                        <h4>是否触发表单验证 : </h4>
                        <spen :style='样式2'>英:validate-event,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["validate-event"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换 -->
                    <div :style='样式1'>
                        <h4>switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换 : </h4>
                        <spen :style='样式2'>英:before-change,类型:boolean / Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["before-change"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- input 的 id -->
                    <div :style='样式1'>
                        <h4>input 的 id : </h4>
                        <spen :style='样式2'>英:id,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.id'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- input 的 tabindex -->
                    <div :style='样式1'>
                        <h4>input 的 tabindex : </h4>
                        <spen :style='样式2'>英:tabindex,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tabindex'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 等价于原生 input aria-label 属性 -->
                    <div :style='样式1'>
                        <h4>等价于原生 input aria-label 属性 : </h4>
                        <spen :style='样式2'>英:label,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.label'
                            size='small' @change="提交改变"></el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-switch v-bind="属性" style="margin-top: 20px;" v-model="开关值"></el-switch>
            <h5>下面是颜色例子</h5>
            <el-switch v-model="value2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                active-text="左颜色例子" inactive-text="右颜色例子" />
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 50 }" type="textarea" placeholder="代码展示"
                style="width: 98%;margin-top: 50px;" />
        </div>
    </div>
</template>
<script setup>
import { Delete, Edit, Search, Share, Upload, Check, Close } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive, } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 = proxy.router

const value1 = ref(true)
const value2 = ref(true)

const 开关值 = ref(false)
const 代码 = ref('')
const 提交改变 = async () => {
    let 结果 = await 提交方法("组件修改", 组件名.value, 属性.value)
    代码.value = 结果
}

const 组件名 = ref('开关')
const 属性 = ref({
    disabled:null,//是否禁用
    loading: null,//是否显示加载中
    size: null,//switch 的大小
    width: null,//switch 的宽度
    "inline-prompt": null,//无论图标或文本是否显示在点内，只会呈现文本的第一个字符
    "active-icon": null,//switch 状态为 on 时所显示图标，设置此项会忽略 active-text
    "inactive-icon": null,//switch 状态为 off 时所显示图标，设置此项会忽略 inactive-text
     "active-action-icon": null,//on状态下显示的图标组件
     "inactive-action-icon": null,//off状态下显示的图标组件
     "active-text": null,//switch 打开时的文字描述
    "inactive-text": null,//switch 的状态为 off 时的文字描述
     "active-value": null,//switch 状态为 on 时的值
     //"inactive-value": null,//switch的状态为 off 时的值
    // "active-color": null,//当在 on 状态时的背景颜色(已废弃，请使用 CSS var --el-switch-on-color )
    // "inactive-color": null,//off 状态时的背景颜色(已废弃，使用 CSS var --el-switch-off-color )
    // "border-color": null,//开关的边框颜色 ( 已废弃，使用 CSS var --el-switch-border-color )
    // name: null,//switch 对应的 name 属性
   //  "validate-event": null,//是否触发表单验证
    // "before-change": null,//switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换
    // id: null,//input 的 id
    // tabindex: null,//input 的 tabindex
    // label: null,//等价于原生 input aria-label 属性

})
const 重置组件=()=>{
    let 原生属性 = {
    disabled:null,//是否禁用
    loading: null,//是否显示加载中
    size: null,//switch 的大小
    width: null,//switch 的宽度
    "inline-prompt": null,//无论图标或文本是否显示在点内，只会呈现文本的第一个字符
    "active-icon": null,//switch 状态为 on 时所显示图标，设置此项会忽略 active-text
    "inactive-icon": null,//switch 状态为 off 时所显示图标，设置此项会忽略 inactive-text
     "active-action-icon": null,//on状态下显示的图标组件
     "inactive-action-icon": null,//off状态下显示的图标组件
     "active-text": null,//switch 打开时的文字描述
    "inactive-text": null,//switch 的状态为 off 时的文字描述
     "active-value": null,//switch 状态为 on 时的值
     //"inactive-value": null,//switch的状态为 off 时的值
    // "active-color": null,//当在 on 状态时的背景颜色(已废弃，请使用 CSS var --el-switch-on-color )
    // "inactive-color": null,//off 状态时的背景颜色(已废弃，使用 CSS var --el-switch-off-color )
    // "border-color": null,//开关的边框颜色 ( 已废弃，使用 CSS var --el-switch-border-color )
    // name: null,//switch 对应的 name 属性
   //  "validate-event": null,//是否触发表单验证
    // "before-change": null,//switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换
    // id: null,//input 的 id
    // tabindex: null,//input 的 tabindex
    // label: null,//等价于原生 input aria-label 属性
    }
    属性.value=原生属性
    开关值.value=false
    提交改变()
}

const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')




</script>
<style scoped>

</style>
